import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 带动画效果的订阅按钮
/// - 循环缩放动画（从小到大再到小）
/// - 渐变颜色方向循环变化（E1FF00 -> 05FFFD 变为 05FFFD -> E1FF00）
class AnimatedSubscribeButton extends StatefulWidget {
  final String text;
  final VoidCallback? onTap;
  final TextStyle? textStyle;

  const AnimatedSubscribeButton({
    super.key,
    required this.text,
    this.onTap,
    this.textStyle,
  });

  @override
  State<AnimatedSubscribeButton> createState() =>
      _AnimatedSubscribeButtonState();
}

class _AnimatedSubscribeButtonState extends State<AnimatedSubscribeButton>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;
  late Animation<double> _gradientAnimation;

  // 渐变颜色
  static const Color _colorLeft = Color(0xFFE1FF00); // 黄色
  static const Color _colorRight = Color(0xFF05FFFD); // 青色

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 1500), // 完整循环2秒
      vsync: this,
    );

    // 缩放动画：0.95 -> 1.05 -> 0.95
    _scaleAnimation = TweenSequence<double>([
      TweenSequenceItem(
        tween: Tween<double>(
          begin: 0.85,
          end: 1.15,
        ).chain(CurveTween(curve: Curves.easeInOut)),
        weight: 1,
      ),
      // TweenSequenceItem(
      //   tween: Tween<double>(
      //     begin: 1.15,
      //     end: 0.85,
      //   ).chain(CurveTween(curve: Curves.easeInOut)),
      //   weight: 1,
      // ),
    ]).animate(_controller);

    // 渐变方向动画：0.0 -> 1.0，用于控制渐变起点/终点位置
    _gradientAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
        reverseCurve: Curves.easeInOut,
      ),
    );
    _controller.repeat(reverse: true);
    // _controller.repeat(); // 循环播放
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        // 渐变颜色动画：0.0 时左=E1FF00右=05FFFD，1.0 时左=05FFFD右=E1FF00
        final Color startColor =
            Color.lerp(_colorLeft, _colorRight, _gradientAnimation.value) ??
            _colorLeft;
        final Color endColor =
            Color.lerp(_colorRight, _colorLeft, _gradientAnimation.value) ??
            _colorRight;

        return Transform.scale(
          scale: _scaleAnimation.value,
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(color: Color(0xff6EFFFD), width: 0.5.w),
              borderRadius: BorderRadius.circular(60.r),
            ),
            padding: EdgeInsets.symmetric(horizontal: 3.w, vertical: 3.w),
            child: Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [startColor, endColor],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
                borderRadius: BorderRadius.circular(60.r),
              ),
              padding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 5.h),
              child: GestureDetector(
                onTap: widget.onTap,
                child: Text(widget.text, style: widget.textStyle),
              ),
            ),
          ),
        );
      },
    );
  }
}
